$base-font-family: "Carrois Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif
$source-code-font-family: "Source Code Pro", monospace

html
  font: 14px/1.4 $base-font-family
  color: #333

a
  color: #E10FCE
  font-weight: bold
  text-decoration: none

a:hover
  text-decoration: underline

h1
  color: #C647BF
  font-size: 4.1em
  font-weight: bold
  font-family: $source-code-font-family
  margin-bottom: 0
  line-height: 1
  word-spacing: -0.3em

h2
  margin-top: 0
  margin-bottom: 2em

h1, h2
  text-align: center

h3
  font-size: 1.3em
  font-family: $source-code-font-family
  margin-bottom: 0
  position: relative
  padding-left: .1em

h3:hover .anchor, h3:focus .anchor
  display: block

.anchor
  display: none
  font-style: normal
  font-weight: normal
  position: absolute
  right: 100%
  top: 0

.anchor::before
  content: '¶'

.anchor:hover
  text-decoration: none

h3 ~ p
  margin-top: 0

article
  margin: 0 auto
  width: 640px

article p
  font-size: 1.3em

article code
  border-radius: 0.315em
  border: 1px solid #ccc
  padding: 0 0.3em 0.040em
  font-size: 0.9em

article img
  margin: 0 auto
  max-width: 100%
  text-align: center
  display: block
  box-shadow: rgba(0, 0, 0, 0.37) 0px 0px 6px
  border-radius: 7px
  padding: 0.4em 0.9em

article > ul
  font-size: 1.2em
  padding-left: 0

article > ul ul
  padding-left: 1em

article ul
  line-height: 1.5
  list-style-position: inside
  list-style-type: square

footer
  font-size: .7em
  border-top: 1px solid #e9e6e1
  margin-top: 1em
  margin-bottom: 2em
  padding-top: 1em

.license
  float: left

.about
  float: right

.about, .license
  margin-top: 0

.changelog
  border: 1px solid #aaa
  margin: 0 0.5em
  padding: 1em
  overflow-x: auto
  height: 20em

.locales li
  display: inline
  list-style-type: none
  padding-right: 20px
  white-space: nowrap

pre, code
  font-family: $source-code-font-family
